<template>
  <el-popover
    placement="bottom"
    width="300"
    trigger="click"
    popper-class="filter-table-input"
  >
    <i
      slot="reference"
      class="el-icon-search table-filter-icon"
      @click="headerClick"
    />
    <!-- content -->
    <section class="table-filter-btns">
      <el-row style="display: flex">
        <el-select v-model="operator" style="width: 80px" size="mini">
          <el-option label="=" value="=" />
          <el-option label="!=" value="!=" />
          <el-option label=">" value=">" />
          <el-option label=">=" value=">=" />
          <el-option label="<" value="<" />
          <el-option label="<=" value="<=" />
          <el-option label="LIKE" value="LIKE" />
          <el-option label="BETWEEN" value="BETWEEN" />
        </el-select>

        <!-- 输入框 -->
        <el-input
          v-if="operator != 'BETWEEN'"
          style="width: 200px"
          v-model="searchKey"
          placeholder="Key Word !"
          size="mini"
          class="filte-input"
          @keydown.native.enter="handleConfirm"
        />
        <el-date-picker
          style="width: 200px"
          size="mini"
          v-if="operator == 'BETWEEN'"
          clearable
          v-model="dateValue"
          type="daterange"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDate"
        >
        </el-date-picker>
      </el-row>
      <!-- 摆放按钮 -->
      <section class="btns">
        <!-- <el-button plain size="mini" @click="handleClear"> Clear </el-button> -->
        <el-button type="primary" size="mini" @click="handleConfirm">
          搜索
        </el-button>
      </section>
    </section>
  </el-popover>
</template>
<script>
export default {
  data() {
    return {
      dateValue: [],
      searchKey: "",
      operator: "=",
    };
  },
  methods: {
    handleConfirm() {
      this.$emit("filterChange", {
        operator: this.operator,
        value: this.searchKey,
      });
    },
    headerClick(e) {
      console.log(e, "小茄子");
      e.cancelBubble = true;
    },
    handleDate(key) {
      if (this.dateValue.length == 2) {
        this.searchKey = `${this.dateValue[0]} AND ${this.dateValue[1]}`;
        this.$emit("filterChange", {
          operator: this.operator,
          value: this.searchKey,
        });
      }
    },
  },
};
</script>